Learners, PR Template

Self checklist

• I have titled my PR with Region | Cohort | FirstName LastName | Sprint | Assignment Title
• My changes meet the requirements of the task
• I have tested my changes
• My changes follow the style guide

Changelist

Briefly explain your PR.

This PR implements the Unfollow feature in the Profile component using the existing component-based architecture and single source of truth state pattern.
The Unfollow button:

• Only appears when the logged-in user is following the profile user
• Removes the logged-in user from that user’s followers when clicked
• Updates the UI based on refreshed state from the backend

Changes
Frontend

index.html

• Added Unfollow button to the profile-template with data-action="unfollow".
  components/profile.mjs
• Added handleUnfollow handler.
• Button visibility derived from API state:
  • Hidden when viewing own profile (is_self)
  • Hidden when not following (!is_following)

On click:
Calls apiService.unfollowUser(username)
Refreshes profile and suggestion state

api.mjs

• Implemented unfollowUser(username):
  • Sends POST /unfollow with { unfollow_username: username }

Backend
main.py
Added POST /unfollow route.

endpoints.py
Implemented do_unfollow():

• Validates request body
• Looks up target user
• Calls data.follows.unfollow(...)
• Returns { success: true }

data/follows.py

• Implemented unfollow(follower, followee):
  • Deletes relationship via DELETE FROM follows WHERE follower=? AND followee=?

1. End-to-End Flow
   /profile/ returns:

• followers, follows
• is_following, is_self

2. Profile component renders button visibility from state.
3. Clicking Unfollow:

• Removes follow relationship in DB
• Re-fetches profile data
• UI updates automatically from state

How to Test
Automated

• npx playwright test

Manual

1. Sign up two users (e.g. sample, AnotherUser)
2. Log in as sample
3. Visit /#/profile/AnotherUser
4. Click Follow → Unfollow button appears
5. Click Unfollow → follower count updates and Unfollow disappears